<template>
	<view class="blacklistBox">
		<block v-if="blacklistShow">
			<view class="blacklists me-fx-row-sb-c" v-for="(item, index) in blacklist">
				<view class="me-fx-row-start-c ">
					<image :src="item.disliker.avatar" mode=""></image>
					<view class="nickName me-text-beyond">
						{{item.disliker.username}}
					</view>
				</view>
				<view class="remove" @click="removeBlack(item.disliker.id)">
					移出黑名单
				</view>
			</view>
		</block>
		<view class="nohaveList" v-else>
			<image src="../../static/img/newimg/xx.png" mode=""></image>
			暂时没有更多数据啦~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				last_page: 1,
				blacklist: [],
				blacklistShow:true
			}
		},
		created() {
			this.blacklistData()
		},
		methods: {
			blacklistData() {
				this.$u.get('/blacklist/list/' + this.page).then(res => {
						if (res) {
							this.last_page = res.data.list.last_page
							if (res.data.list.current_page == 1) {
								this.blacklist = res.data.list.data
							} else {
								this.blacklist = this.blacklist.concat(res.data.list.data)
							}
							
							if(res.data.list.data.length > 0){
								this.blacklistShow =true
							}else {
								this.blacklistShow =false
							}
							// for(let i =0; i<=res.data.list.data.length;i++){
							// 	if(res.data.list.data[i].last_online_time){
							// 		this.blacklist[i].last_online_time = getDateDiff(res.data.list.data[i].last_online_time)
							// 	}
							// }
						}
					})
					.catch((res) => {

					})
			},
			removeBlack(id) {
				this.$u.delete('/blacklist/remove', {
						id: id
					}).then(res => {
						if (res) {
							this.blacklistData()
							uni.showToast({
								title: '移除成功',
								duration: 1000,
								icon: 'none'
							})
						}
					})
					.catch((res) => {

					})
			},
			onReachBottom() { //uniapp 监听下拉加载生命周期
				if (this.page >= this.last_page) {
					uni.showToast({
						title: '没有更多数据了',
						duration: 1000,
						icon: 'none'
					})
					return
				}
				this.page++
				this.blacklistData(this.page)
			},
		}
	}
</script>

<style>
	.blacklistBox {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: white;
	}

	.blacklists {
		padding: 22rpx 0;
	}

	.blacklists image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.remove {
		font-size: 30rpx;
		color: rgba(92, 20, 255, 1);
	}

	.nickName {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
		width: 240rpx;
	}

	.blacklists:nth-of-type(n+2) {
		border-top: 1rpx solid #F5F5F5;
	}
	.nohaveList{
		padding: 26rpx;
		font-size: 32rpx;
		text-align: center;
	}
		
	.nohaveList image{
		width: 100%;
		height: 537rpx;
		display: block;
	}
</style>
